<template>
  <div class="scc">
    <!----------------------------首页展示容器---------------------->
    <el-tabs style="background-color: transparent" v-model="activeName" stretch>

      <!----------------------------运动会详情------------------------>
      <el-tab-pane label="运动会详情" name="first">
        <div>
          <el-container>
            <el-header>普洱学院2022届冬季运动会</el-header>
            <el-container>
              <el-main>
                <el-table
                  :data="noticeList"
                  style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="内容">
                          <div>
                            <el-image v-html="props.row.noticeContent"></el-image>
                          </div>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="通知列表"
                    prop="noticeTitle">
                  </el-table-column>
                  <el-table-column label="时间" align="center" prop="createTime" width="100">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-tab-pane>

      <!----------------------------学生报名-------------------------->
      <el-tab-pane style="background-color: transparent" label="报名" name="second">
        <apply></apply>
      </el-tab-pane>

      <!----------------------------学生成绩--------------------------->
      <el-tab-pane label="排名" name="third">
        <score></score>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import {listNotice} from "@/api/system/notice";
import {listImg} from "@/api/system/img";
import Img from "@/views/system/img";
import apply from "@/views/components/sports/apply";
import score from "@/views/components/sports/score";

export default {
  components: {Img, apply, score},
  dicts: ['sport_item', 'item_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 图片列表
      imgList: [],
      // 消息列表
      noticeList: [],

      activeName: 'first',

      // 表单校验
      rules: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getNotice();
    this.getImg();
  },
  methods: {
    /** 查询运动会图片列表 */
    getImg() {
      this.loading = true;
      listImg(this.queryParams).then(response => {
        this.imgList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取通知列表 */
    getNotice() {
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.loading = false;
      });
    },
  }
};
</script>

<style>
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

.el-table th,
.el-table tr,
.el-table td {;
  background-color: transparent !important;
}

::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto;
}

.el-header {
  text-align: center;
  line-height: 80px;
}

.el-main {

}

.el-aside {
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}

.el-image {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

</style>
